<template>
  <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
    <template slot-scope="scope">
      <template>
        <el-tooltip
          v-permission="updateAuth"
          v-if="showUpdateButton(scope.row)"
          class="item"
          effect="dark"
          content="编辑"
          placement="top"
        >
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            :disabled="disableUpdateButton(scope.row)"
            @click="handleUpdate(scope.row, scope.$index)"
          ></el-button>
        </el-tooltip>
      </template>
      <slot :index="scope.$index" :row="scope.row"></slot>
      <template>
        <el-tooltip
          v-permission="deleteAuth"
          v-if="showDeleteButton(scope.row)"
          class="item"
          effect="dark"
          content="删除"
          placement="top"
        >
          <el-popover placement="bottom" width="160" v-model="scope.row.deleteVisible">
            <p>确认要删除吗？</p>
            <div style="text-align: right; margin: 0" v-loading="loading">
              <el-button size="mini" type="text" @click="scope.row.deleteVisible = false">
                取消
              </el-button>
              <el-button type="primary" size="mini" @click="handleDelete(scope.row, scope.$index)">
                确定
              </el-button>
            </div>
            <el-button
              slot="reference"
              size="mini"
              type="danger"
              icon="el-icon-delete"
              :disabled="disableDeleteButton(scope.row)"
              circle
            ></el-button>
          </el-popover>
        </el-tooltip>
      </template>
    </template>
  </el-table-column>
</template>

<script>
/**
 * 表单操作按钮
 */
export default {
  name: 'ActionButton',
  props: {
    // 处理更新按钮操作
    handleUpdate: {
      type: Function,
      default: () => {}
    },
    // 处理删除按钮操作
    handleDelete: {
      type: Function,
      default: () => {}
    },
    // 是否显示更新按钮
    showUpdate: {
      type: Boolean | Function,
      default: true
    },
    // 是否显示删除按钮
    showDelete: {
      type: Boolean | Function,
      default: true
    },
    // 是否禁用更新按钮
    disableUpdate: {
      type: Boolean | Function,
      default: false
    },
    // 是否禁用删除按钮
    disableDelete: {
      type: Boolean | Function,
      default: false
    },
    // 删除按钮加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 更新按钮权限
    updateAuth: {
      type: String,
      default: ''
    },
    // 删除按钮权限
    deleteAuth: {
      type: String,
      default: ''
    }
  },
  methods: {
    showDeleteButton(item) {
      if (this.showDelete instanceof Function) {
        return this.showDelete(item)
      }
      return this.showDelete
    },
    showUpdateButton(item) {
      if (this.showUpdate instanceof Function) {
        return this.showUpdate(item)
      }
      return this.showUpdate
    },
    disableDeleteButton(item) {
      if (this.disableDelete instanceof Function) {
        return this.disableDelete(item)
      }
      return this.disableDelete
    },
    disableUpdateButton(item) {
      if (this.disableUpdate instanceof Function) {
        return this.disableUpdate(item)
      }
      return this.disableUpdate
    }
  }
}
</script>
